<template>
  <div class="app-container">
    <div style="position: relative; height: 90px">
      <div>
        <img src="../assets/images/topbg.png" alt="" style="width: 100%" />
      </div>
      <div style="position: absolute; left: 37.5%; top: 0px">
        <img src="../assets/images/dapinglogo.png" alt="" />
      </div>
    </div>

    <div class="row-layout">
      <el-row :gutter="10">
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <div class="overhaul-box">
              <div
                style="
                  display: flex;
                  margin: auto;
                  width: 60%;
                  padding-top: 10px;
                "
              >
                <p class="check-no">检7-1</p>
                <p
                  class="check-no"
                  style="margin-left: 35px"
                  v-if="listFiveObj.type && listFiveObj.type == '断电作业'"
                >
                  {{ listFiveObj.type }}
                </p>
                <p
                  class="check-no"
                  style="margin-left: 35px; color: red"
                  v-if="listFiveObj.type && listFiveObj.type != '断电作业'"
                >
                  {{ listFiveObj.type }}
                </p>
                <p
                  class="check-no"
                  style="color: red; margin-left: 20px; font-size: 24px"
                >
                  {{ listFiveObj.oneStartState }}
                </p>
                <p
                  class="check-no"
                  style="color: red; margin-left: 20px; font-size: 24px"
                >
                  {{ listFiveObj.oneEndState }}
                </p>
              </div>
              <div class="check-top">
                <div class="check-text">车号：</div>
                <div class="check-num">{{ listFiveObj.carCode || "/" }}</div>
                <div class="start-time-text">开始时间：</div>
                <div class="start-time">{{ listFiveObj.startTime || "/" }}</div>
                <div class="duration">计划时间：</div>
                <div class="duration-time">
                  {{ listFiveObj.planTime || "/" }}
                </div>
              </div>
              <div class="check-middle">
                <div
                  style="
                    display: flex;
                    width: 100%;
                    height: 45px;
                    margin-top: 15px;
                  "
                >
                  <span class="team groupPad">班组：</span>
                  <vue-seamless-scroll
                    :data="listFiveObj.tworkRecordReVoList"
                    :class-option="seamlessScrollOption"
                    class="warp"
                  >
                    <ul class="ul-item">
                      <li
                        :class="classS1(item.workTeamName.length)"
                        v-for="(item, index) in listFiveObj.tworkRecordReVoList"
                        :key="item.id + index"
                      >
                        {{ item.workTeamName }}
                      </li>
                    </ul>
                  </vue-seamless-scroll>
                </div>

                <div
                  style="
                    display: flex;
                    width: 100%;
                    height: 45px;
                    margin-top: 15px;
                  "
                >
                  <span class="team">时间：</span>
                  <vue-seamless-scroll
                    :data="listFiveObj.tworkRecordReVoList"
                    :class-option="seamlessScrollOption"
                    class="warp"
                  >
                    <ul class="ul-item">
                      <li
                        v-for="item in listFiveObj.tworkRecordReVoList"
                        :key="item.id + '5'"
                        class="duration-num"
                        :class="classS1(item.workTeamName.length)"
                      >
                        {{ item.startShortTime }}
                      </li>
                    </ul>
                  </vue-seamless-scroll>
                </div>
              </div>
              <div style="margin-top: 20px; margin-left: 10px">
                <img
                  src="../assets/images/dapingcars1.png"
                  alt=""
                  v-if="listFiveObj.carCode"
                />
                <img src="../assets/images/dapingcars2.png" alt="" v-else />
              </div>
            </div>
            <div class="overhaul-box">
              <div
                style="
                  display: flex;
                  margin: auto;
                  width: 60%;
                  padding-top: 10px;
                "
              >
                <p class="check-no">检8-1</p>

                <p
                  class="check-no"
                  style="margin-left: 35px"
                  v-if="listSixObj.type && listSixObj.type == '断电作业'"
                >
                  {{ listSixObj.type }}
                </p>
                <p
                  class="check-no"
                  style="margin-left: 35px; color: red"
                  v-if="listSixObj.type && listSixObj.type != '断电作业'"
                >
                  {{ listSixObj.type }}
                </p>
                <p
                  class="check-no"
                  style="color: red; margin-left: 20px; font-size: 24px"
                >
                  {{ listSixObj.oneStartState }}
                </p>
                <p
                  class="check-no"
                  style="color: red; margin-left: 20px; font-size: 24px"
                >
                  {{ listSixObj.oneEndState }}
                </p>
              </div>
              <div class="check-top">
                <div class="check-text">车号：</div>
                <div class="check-num">{{ listSixObj.carCode || "/" }}</div>
                <div class="start-time-text">开始时间：</div>
                <div class="start-time">{{ listSixObj.startTime || "/" }}</div>
                <div class="duration">计划时间：</div>
                <div class="duration-time">
                  {{ listSixObj.planTime || "/" }}
                </div>
              </div>
              <div class="check-middle">
                <div
                  style="
                    display: flex;
                    width: 100%;
                    height: 45px;
                    margin-top: 15px;
                  "
                >
                  <span class="team groupPad">班组：</span>
                  <vue-seamless-scroll
                    :data="listSixObj.tworkRecordReVoList"
                    :class-option="seamlessScrollOption"
                    class="warp"
                  >
                    <ul class="ul-item">
                      <li
                        :class="classS1(item.workTeamName.length)"
                        v-for="(item, index) in listSixObj.tworkRecordReVoList"
                        :key="item.id + index"
                      >
                        {{ item.workTeamName }}
                      </li>
                    </ul>
                  </vue-seamless-scroll>
                </div>
                <div
                  style="
                    display: flex;
                    width: 100%;
                    height: 45px;
                    margin-top: 15px;
                  "
                >
                  <span class="team">时间：</span>
                  <vue-seamless-scroll
                    :data="listSixObj.tworkRecordReVoList"
                    :class-option="seamlessScrollOption"
                    class="warp"
                  >
                    <ul class="ul-item">
                      <li
                        v-for="item in listSixObj.tworkRecordReVoList"
                        :key="item.id + '6'"
                        class="duration-num"
                        :class="classS1(item.workTeamName.length)"
                      >
                        {{ item.startShortTime }}
                      </li>
                    </ul>
                  </vue-seamless-scroll>
                </div>
              </div>
              <div style="margin-top: 20px; margin-left: 10px">
                <img
                  src="../assets/images/dapingcars1.png"
                  alt=""
                  v-if="listSixObj.carCode"
                />
                <img src="../assets/images/dapingcars2.png" alt="" v-else />
              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <div class="overhaul-box">
              <div
                style="
                  display: flex;
                  margin: auto;
                  width: 60%;
                  padding-top: 10px;
                "
              >
                <p class="check-no">检7-2</p>
                <p
                  class="check-no"
                  style="margin-left: 35px"
                  v-if="listObj.type && listObj.type == '断电作业'"
                >
                  {{ listObj.type }}
                </p>
                <p
                  class="check-no"
                  style="margin-left: 35px; color: red"
                  v-if="listObj.type && listObj.type != '断电作业'"
                >
                  {{ listObj.type }}
                </p>
                <p
                  class="check-no"
                  style="color: red; margin-left: 20px; font-size: 24px"
                >
                  {{ listObj.twoStartState }}
                </p>
                <p
                  class="check-no"
                  style="color: red; margin-left: 20px; font-size: 24px"
                >
                  {{ listObj.twoEndState }}
                </p>
              </div>
              <div class="check-top">
                <div class="check-text">车号：</div>
                <div class="check-num">{{ listObj.carCode || "/" }}</div>
                <div class="start-time-text">开始时间：</div>
                <div class="start-time">{{ listObj.startTime || "/" }}</div>
                <div class="duration">计划时间：</div>
                <div class="duration-time">{{ listObj.planTime || "/" }}</div>
              </div>
              <div class="check-middle">
                <div
                  style="
                    display: flex;
                    width: 100%;
                    height: 45px;
                    margin-top: 15px;
                  "
                >
                  <span class="team groupPad">班组：</span>
                  <vue-seamless-scroll
                    :data="listObj.tworkRecordReVoList"
                    :class-option="seamlessScrollOption"
                    class="warp"
                  >
                    <ul class="ul-item">
                      <li
                        v-for="(item, index) in listObj.tworkRecordReVoList"
                        :class="classS1(item.workTeamName.length)"
                        :key="item.id + index"
                      >
                        {{ item.workTeamName }}
                      </li>
                    </ul>
                  </vue-seamless-scroll>
                </div>
                <div
                  style="
                    display: flex;
                    width: 100%;
                    height: 45px;
                    margin-top: 15px;
                  "
                >
                  <span class="team">时间：</span>
                  <vue-seamless-scroll
                    :data="listObj.tworkRecordReVoList"
                    :class-option="seamlessScrollOption"
                    class="warp"
                  >
                    <ul class="ul-item">
                      <li
                        v-for="item in listObj.tworkRecordReVoList"
                        :key="item.id + '1'"
                        class="duration-num"
                        :class="classS1(item.workTeamName.length)"
                      >
                        {{ item.startShortTime }}
                      </li>
                    </ul>
                  </vue-seamless-scroll>
                </div>
              </div>
              <div style="margin-top: 20px; margin-left: 10px">
                <img
                  src="../assets/images/dapingcars1.png"
                  alt=""
                  v-if="listObj.carCode"
                />
                <img src="../assets/images/dapingcars2.png" alt="" v-else />
              </div>
            </div>
            <div class="overhaul-box">
              <div
                style="
                  display: flex;
                  margin: auto;
                  width: 60%;
                  padding-top: 10px;
                "
              >
                <p class="check-no">检8-2</p>

                <p
                  class="check-no"
                  style="margin-left: 35px"
                  v-if="listTwoObj.type && listTwoObj.type == '断电作业'"
                >
                  {{ listTwoObj.type }}
                </p>
                <p
                  class="check-no"
                  style="margin-left: 35px; color: red"
                  v-if="listTwoObj.type && listTwoObj.type != '断电作业'"
                >
                  {{ listTwoObj.type }}
                </p>
                <p
                  class="check-no"
                  style="color: red; margin-left: 20px; font-size: 24px"
                >
                  {{ listTwoObj.twoStartState }}
                </p>
                <p
                  class="check-no"
                  style="color: red; margin-left: 20px; font-size: 24px"
                >
                  {{ listTwoObj.twoEndState }}
                </p>
              </div>
              <div class="check-top">
                <div class="check-text">车号：</div>
                <div class="check-num">{{ listTwoObj.carCode || "/" }}</div>
                <div class="start-time-text">开始时间：</div>
                <div class="start-time">{{ listTwoObj.startTime || "/" }}</div>
                <div class="duration">计划时间：</div>
                <div class="duration-time">
                  {{ listTwoObj.planTime || "/" }}
                </div>
              </div>
              <div class="check-middle">
                <div
                  style="
                    display: flex;
                    width: 100%;
                    height: 45px;
                    margin-top: 15px;
                  "
                >
                  <span class="team groupPad">班组：</span>
                  <vue-seamless-scroll
                    :data="listTwoObj.tworkRecordReVoList"
                    :class-option="seamlessScrollOption"
                    class="warp"
                  >
                    <ul class="ul-item">
                      <li
                        :class="classS1(item.workTeamName.length)"
                        v-for="(item, index) in listTwoObj.tworkRecordReVoList"
                        :key="item.id + index"
                      >
                        {{ item.workTeamName }}
                      </li>
                    </ul>
                  </vue-seamless-scroll>
                </div>
                <div
                  style="
                    display: flex;
                    width: 100%;
                    height: 45px;
                    margin-top: 15px;
                  "
                >
                  <span class="team">时间：</span>
                  <vue-seamless-scroll
                    :data="listTwoObj.tworkRecordReVoList"
                    :class-option="seamlessScrollOption"
                    class="warp"
                  >
                    <ul class="ul-item">
                      <li
                        v-for="item in listTwoObj.tworkRecordReVoList"
                        :key="item.id + '2'"
                        class="duration-num"
                        :class="classS1(item.workTeamName.length)"
                      >
                        {{ item.startShortTime }}
                      </li>
                    </ul>
                  </vue-seamless-scroll>
                </div>
              </div>
              <div style="margin-top: 20px; margin-left: 10px">
                <img
                  src="../assets/images/dapingcars1.png"
                  alt=""
                  v-if="listTwoObj.carCode"
                />
                <img src="../assets/images/dapingcars2.png" alt="" v-else />
              </div>
            </div>
          </div>
        </el-col>

      </el-row>
    </div>
  </div>
</template>

<script>
import { shopsList } from "@/api/daping/daping";
import vueSeamlessScroll from "vue-seamless-scroll";

export default {
  components: {
    vueSeamlessScroll,
  },
  name: "workshop",
  data() {
    return {
      getWeeks: "",
      getDates: "",
      timer: null,
      scrollTime: null,
      scrollW: 0, //记录滚动到哪了
      items: [],
      animate: false,
      newFiveList: [],
      classOption: {
        limitMoveNum: 2,
        direction: 2,
      },
      listArr: [],
      listObj: { carCode: "", startTime: "", duration: "", type: "" },
      listTwoArr: [],
      listTwoObj: { carCode: "", startTime: "", duration: "", type: "" },
      listThreeArr: [],
      listThreeObj: { carCode: "", startTime: "", duration: "", type: "" },
      listFourArr: [],
      listFourObj: { carCode: "", startTime: "", duration: "", type: "" },
      listFiveArr: [],
      listFiveObj: { carCode: "", startTime: "", duration: "", type: "" },
      listSixArr: [],
      listSixObj: { carCode: "", startTime: "", duration: "", type: "" },
      listSevenArr: [],
      listSevenObj: { carCode: "", startTime: "", duration: "", type: "" },
      listEightArr: [],
      listEightObj: { carCode: "", startTime: "", duration: "", type: "" },
      flag: false,
      flagTwo: false,
      flagThree: false,
      flagFour: false,
      flagFive: false,
      flagSix: false,
      flagSeven: false,
      flagEight: false,
      timerTimes: null,
    };
  },
  mounted() {
     Promise.all([
      this.getShopsList(),
      this.getShopsList2(),
      this.getShopsList5(),
      this.getShopsList6(),
    ]).then((res) => {
      this.settimedata();
    });
  },
  computed: {
    seamlessScrollOption() {
      return {
        step: 0.6, // 数值越大速度滚动越快
        hoverStop: false, // 是否开启鼠标悬停stop
        direction: 2, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
      };
    },
  },
  destroyed() {
    this.timer = null;
    this.timerTimes = null;
    clearInterval(this.timer);
    clearInterval(this.timerTimes);
  },
  methods: {
    getTimes() {
      this.timerTimes = setInterval(() => {
        this.getWeek();
        this.getDate();
      }, 1000);
    },
    // 位数判断
    getws(val) {
      return val >= 10 ? val : "0" + val;
    },
    getWeek() {
      var week = new Date().getDay();
      var str = "星期";
      switch (week) {
        case 0:
          str += "日";
          break;
        case 1:
          str += "一";
          break;
        case 2:
          str += "二";
          break;
        case 3:
          str += "三";
          break;
        case 4:
          str += "四";
          break;
        case 5:
          str += "五";
          break;
        case 6:
          str += "六";
          break;
      }
      this.getWeeks = str;
    },
    // 获取当前日期,
    getDate() {
      var today = new Date();
      var year = today.getFullYear(); //获取年份
      var month = this.getws(today.getMonth() + 1);
      var day = this.getws(today.getDate()); //获取日期
      var hour = this.getws(today.getHours());
      var minute = this.getws(today.getMinutes());
      var seconds = this.getws(today.getSeconds());
      this.getDates =
        year +
        "年" +
        month +
        "月" +
        day +
        "日" +
        hour +
        ":" +
        minute +
        ":" +
        seconds;
    },
    classS1(length) {
      let v = [];
      if (length <= 5) {
        v.push("team-num");
      }
      if (length == 6) {
        v.push("team-numsix");
      }
      if (length >= 7) {
        v.push("team-numseven");
      }
      return v;
    },
     settimedata() {
      this.timer = setInterval(() => {
        Promise.all([
          this.getShopsList(),
          this.getShopsList2(),
          this.getShopsList5(),
          this.getShopsList6(),
        ]).then((res) => {});
      }, 1000 * 30);
    },
    // 检11-2
    getShopsList() {

       return new Promise((resolve) => {
        let params = {
              complete: 2,
        trackId: 3,
        };
        shopsList(params).then((res) => {
          this.listArr = res.rows;
          if (res.rows.length > 0) {
            this.listObj = res.rows[0];
          } else {
            this.listObj = {
              carCode: "",
              startTime: "",
              duration: "",
              type: "",
            };
          }
          resolve();
        });
      });
    },
    // 检12-2
    getShopsList2() {

         return new Promise((resolve) => {
        let params2 = {
         complete: 2,
        trackId: 4,
        };

        shopsList(params2).then((res) => {
          this.listTwoArr = res.rows;
          if (res.rows.length > 0) {
            this.listTwoObj = res.rows[0];
          } else {
            this.listTwoObj = {
              carCode: "",
              startTime: "",
              duration: "",
              type: "",
            };
          }
          resolve();
        });
      });
    },

    // 检11-1
    getShopsList5() {


       return new Promise((resolve) => {
        let params5 = {
         complete: 1,
        trackId: 3,
        };

        shopsList(params5).then((res) => {
          this.listFiveArr = res.rows;
          if (res.rows.length > 0) {
            this.listFiveObj = res.rows[0];
          } else {
            this.listFiveObj = {
              carCode: "",
              startTime: "",
              duration: "",
              type: "",
            };
          }
          resolve();
        });
      });
    },
    // 检12-1
    getShopsList6() {
      return new Promise((resolve) => {
        let params6 = {
           complete: 1,
        trackId: 4,
        };

        shopsList(params6).then((res) => {
          this.listSixArr = res.rows;
          if (res.rows.length > 0) {
            this.listSixObj = res.rows[0];
          } else {
            this.listSixObj = {
              carCode: "",
              startTime: "",
              duration: "",
              type: "",
            };
          }
          resolve();
        });
      });
    },
  },
};
</script>
<style lang="scss" scoped>
#box {
  width: 100%;
}
.anim {
  // transition: all 0.5s;
  margin-top: -30px;
}
#con1 li {
  list-style: none;
  line-height: 30px;
  height: 30px;
}
// .groupPad {
//   padding-right: 52px;
// }
.warp {
  width:825px;
  height: 45px;
  margin: 0;
  overflow: hidden;
  ul {
    list-style: none;
    padding: 0;
    margin: 0 auto;
    &.ul-item {
      display: flex;
      .li-item {
        width: 150px;
        height: 120px;
        margin-right: 10px;
        line-height: 120px;
        background-color: #999;
        color: #fff;
        text-align: center;
        font-size: 30px;
      }
    }
  }
}
.app-container {
  min-width: 1900px;
  height: 1080px;
  // width: 100%;
  background: url("../assets/images/dapingbg2.jpg") 0 0 no-repeat;
  background-size: 100% 100%;
  padding: 0 10px !important;
  .row-layout {
    .grid-content {
      .overhaul-box {
        width: 100%;
        height: 485px;
        background: url("../assets/images/jianchabg.png") 0 0 no-repeat;
        background-size: 100% 100%;
        margin-bottom: 6px;
        .check-no {
          text-align: center;
          line-height: 70px;
          font-size: 30px;
          font-weight: 700;
          color: #00ff6c;
          letter-spacing: 1px;
          margin: 0;
        }
        .check-top {
          display: flex;
          padding-top: 90px;
          .check-text,
          .start-time-text,
          .duration {
            height: 45px;
            margin-left: 10px;
            font-size: 24px;
            color: #fff;
            letter-spacing: 2px;
          }
          .check-num,
          .start-time,
          .duration-time {
            font-size: 24px;
            display: inline-block;
            height: 45px;
            background-color: #003567;
            text-align: center;
            color: #fff;
            padding: 5px;
          }
          .duration-time {
            width: 180px;
          }
          .check-num {
            width: 250px;
          }
          .start-time {
            width: 110px;
          }
        }
        .check-middle {
          padding: 0 10px 20px;
          .team,
          .duration-text {
            // margin-top: 15px;
            font-size: 24px;
            color: #fff;
            letter-spacing: 2px;
          }
          .team-num,
          .duration-num {
            display: inline-block;
            background-color: #003567;
            text-align: center;
            color: #fff;
            height: 50px;
            width: 160px;
            font-size: 24px;
            padding: 3px 0;
            // margin-top: 15px;
          }
          .team-numseven {
            display: inline-block;
            background-color: #003567;
            text-align: center;
            color: #fff;
            height: 50px;
            width: 207px;
            font-size: 24px;
            padding: 3px 0;
          }
          .team-numsix {
            display: inline-block;
            background-color: #003567;
            text-align: center;
            color: #fff;
            height: 50px;
            width: 190px;
            font-size: 24px;
            padding: 3px 0;
          }
          .duration-num {
            text-align: center;
            // width: 200px;
            background-color: #020f3b;
            padding: 3px 0;
            color: #fff;
          }
        }
        .check-bottom {
          padding: 0 20px;
        }
      }
    }
  }
}
</style>
